<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>日常工作管理</el-breadcrumb-item>
      <el-breadcrumb-item>员工绩效目标管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-tabs v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane label="绩效目标设置"
         v-if="isHas('achievementformulatelist','first')"
          name="first">
          <PerformanceConfig/>
        </el-tab-pane>
        <el-tab-pane label="绩效目标总揽"
         v-if="isHas('achievementoverviewlist','second')"
          name="second">
          <PerformanceView v-if="activeName == 'second'" />
        </el-tab-pane>
        <el-tab-pane label="邀请订单记录" 
         v-if="isHas('achievementorderlist','third')"
          name="third">
          <InvoiceOrder/>
        </el-tab-pane>
        <el-tab-pane label="邀请会员记录"
         v-if="isHas('achievementuserlist','fourth')"
          name="fourth">
          <InvoiceMember/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script>
import PerformanceConfig from "./performanceConfig";
import PerformanceView from "./performanceView";
import InvoiceOrder from "./invoiceOrder";
import InvoiceMember from "./invoiceMember";
import { has } from "@/public/js/util";
export default {
  components: {
    PerformanceConfig,
    PerformanceView,
    InvoiceOrder,
    InvoiceMember
  },
  props: {},
  data() {
    return {
      activeName: "first",
      isFirst: true
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick() {
      sessionStorage.setItem("_activeName", this.activeName);
    },
    isHas(role, tab) {
      if (this.isFirst) {
        if (has(role, this)) {
          this.activeName = tab;
          this.isFirst = false;
        }
      }
      return has(role, this);
    }
  },
  created() {
    this.activeName = sessionStorage.getItem("_activeName")
      ? sessionStorage.getItem("_activeName")
      : "first";
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>